<script setup>
import { onMounted, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import Header from "@/components/Header.vue";
import { getAddress, getOrderDetail, submitOrder } from "@/api"
import Image from "@/components/Image.vue"
import { showToast } from "vant";
import { useI18n } from "vue-i18n";
import BigNumber from "bignumber.js";
const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const state = reactive({
    name: "",
    tel: "",
    email: '',
    address: '',
    loading: false,
    goodsInfo: {},
    total: 0,
    amount: 0
})
const goTo = (url) => {
    router.push(url)
}

onMounted(() => {
    init();
})

const init = () => {
    getAddress().then(res => {
        state.name = res?.name || '';
        state.tel = res?.tel || '';
        state.email = res?.email || '';
        state.address = res?.address || '';

    }).catch(err => {
        console.log(err)
    })
    getOrderDetail({
        id: route.query.id
    }).then((res => {

        state.goodsInfo = res;
        let completeSchedule = res.completeSchedule || '0/0';
        completeSchedule = completeSchedule.split('/');
        state.amount = completeSchedule[0]
        state.total = completeSchedule[1];
    })).catch(err => {
        console.log(err)
    })
}
const submit = () => {
    state.loading = true;
    submitOrder({ id: route.query.id }).then(() => {

        showToast(t('Successful operation'));
        setTimeout(() => {
            router.push('/task');
            state.loading = false;
        }, 800);
    }).catch(err => {

        showToast(err.msg);
        if (err.code == 'insufficient_balance') {
            router.push('/deposit')
        }
        state.loading = false;
    }).finally(() => {

    })
}
</script>
<template>
    <Header :title="$t('Submit')"></Header>
    <div class=" bg-gray-100">
        <div class="mx-2">
            <div class="h-2"></div>
            <div class="bg-white py-2 px-1.5 rounded-sm flex gap-1" @click="goTo('/address')">
                <img class="h-3.5" src="@/assets/images/address.png" />
                <div class="flex justify-between w-full items-center ">
                    <div class="text-[12px]">
                        <p class="text-[#007bff]">{{ state.name }}</p>
                        <p>{{ state.address }}</p>
                    </div>
                    <van-icon name="arrow" style="color: #999;font-size: 14px;" />
                </div>
            </div>
            <div class="bg-white mt-2 py-2 px-1 rounded-sm text-black text-[12px] flex flex-col gap-1">
                <div>{{ $t('Number') }}: {{ state.goodsInfo?.orderId }}</div>
                <div>{{ $t('Available balance') }}: ${{ state.goodsInfo?.balance }}</div>
                <div class="flex bg-gray-100 gap-1.5">
                    <Image :src="state.goodsInfo?.image" class="h-10 w-10" />
                    <div class="flex flex-col py-2">
                        <p class="text-[14px]">
                            {{ state.goodsInfo?.goodsName }}
                        </p>
                        <p class="text-[#fa1d1d]">
                            ${{ state.goodsInfo?.price }} × 1
                        </p>
                    </div>
                </div>

            </div>
            <div class="bg-white mt-1 px-1.5  py-2 flex flex-col gap-1">
                <div class="flex justify-between border-b h-3">
                    <p>{{ $t('Categories') }}</p>
                    <p>Lyst</p>
                </div>
                <div class="flex justify-between border-b h-3">
                    <p>{{ $t('Commission level') }}</p>
                    <p> {{ BigNumber(state.goodsInfo?.incomeRate || 0).multipliedBy(100) }}% </p>
                </div>
                <div class="flex justify-between border-b h-3">
                    <p>{{ $t('Available balance') }}</p>
                    <p>${{ state.goodsInfo?.balance }}</p>
                </div>
                <div class="flex justify-between border-b h-3">
                    <p>{{ $t('Calculation formula') }}</p>
                    <p>{{ state.goodsInfo?.calculationFormula }}</p>
                </div>
                <div class="flex justify-between border-b h-3">
                    <p>{{ $t('Revenue from this transaction') }}</p>
                    <p>${{ state.goodsInfo?.rebate }}</p>
                </div>
                <div class="flex justify-between border-b h-3">
                    <p>{{ $t('Earnings settled today') }}</p>
                    <p>${{ state.goodsInfo?.settleIncome }}</p>
                </div>
                <div class=" h-3">
                    <div class="flex justify-between ">
                        <div class="left">{{ $t('Complete schedule') }}</div>
                        <div class="text-[#dc3545]">{{ state.goodsInfo.completeSchedule }}</div>
                    </div>
                    <div class="value">
                        <progress class="progress progress-info " style="max-height: 10px;" :value="state?.amount"
                            :max="state.total"></progress>
                    </div>
                </div>
            </div>

            <button @click="submit" :disabled="state.loading"
                class="btn bg-[#232E40] text-white h-[50px] px-2 mt-[20px] mb-[30px] rounded-full min-h-0 w-full text-[12px]">
                {{ $t('Submit') }}
            </button>
        </div>
    </div>

</template>
